<template>
    <div class="banner">
        <el-carousel :height="screenWidth/2 + 'px'" indicator-position="none" :autoplay="true" :interval="4000"
            arrow="never">
            <el-carousel-item v-for="item in img_list" :key="item.id">
                <img :src="item.src" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
    export default {
        name: "Banner",
        props: {
            img_list: {
                type: Array,
                required: true
            }
        },
        data() {
            return {
                // bannerHeight: (document.body.clientWidth) * 900 / 1920 + 'px'
                screenWidth: document.body.clientWidth // 这里是给到了一个默认值
            }
        },
        mounted() {
            const that = this
            window.onresize = () => {
                return (() => {
                    window.screenWidth = document.body.clientWidth
                    that.screenWidth = window.screenWidth
                })()
            }
        },
        watch: {
            screenWidth(val) {
                this.screenWidth = val
            }
        },
        // watch: {
        //     screenWidth(val) {
        //         if (!this.timer) {
        //             this.screenWidth = val
        //             this.timer = true
        //             let that = this
        //             setTimeout(function () {
        //                 // that.screenWidth = that.$store.state.canvasWidth
        //                 console.log(that.screenWidth)
        //                 // that.init()
        //                 that.timer = false
        //             }, 400)
        //         }
        //     }
        // }
    }
</script>
<style lang="stylus">
    .banner {
        margin: 10px 0;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    img {
        width: 100%;
        // height: 100%;
    }
</style>